<template>
	<div class="layout-padding">
		<div class="header">
			<span class="ml-5">区域类型：</span>
			<el-tree-select
				v-model="areaTypeData"
				:data="objList"
				:props="{ value: 'id', label: 'name', children: 'children' }"
				:render-after-expand="false"
				check-strictly
				filterable
				style="width: 250px"
			/>
			<span class="ml-5">统计类型：</span>
			<el-radio-group v-model="radio">
				<el-radio value="1" border>日</el-radio>
				<el-radio value="2" border>月</el-radio>
				<el-radio value="3" border>年</el-radio>
			</el-radio-group>
			<span class="ml-5">时间范围：</span>
			<div>
				<el-date-picker :type="dateType" v-model="date" placeholder="请选择" />
			</div>
			<el-button type="primary" icon="el-icon-search" @click="search" class="ml-5">查询</el-button>
			<el-button icon="el-icon-download" @click="exportExcel">导出报表</el-button>
		</div>
		<div class="content">
			<div class="level">
				<div class="mt-3" style="width: 100%">
					<el-table :data="tableData" v-loading="tableLoading" show-summary heigth="650px" style="width: 100%" border>
						<el-table-column prop="date" align="center" label="时间" width="180" />
						<el-table-column prop="totalVal" align="center" label="总用电量(kWh)" />
						<el-table-column prop="sysCool" align="center" label="设备类型用电量(kWh)">
							<el-table-column prop="hostVal" align="center" label="主机" />
							<el-table-column prop="pumpVal" align="center" label="水泵" />
							<el-table-column prop="towerVal" align="center" label="冷却塔" />
						</el-table-column>
					</el-table>
				</div>
			</div>
		</div>
	</div>
</template>
<script setup>
import { getQueryList } from '/@/api/energymanagement/energyuse/query';
import { useMessage, useMessageBox } from '/@/hooks/message';
import moment from 'moment';
import * as XLSX from 'xlsx';
import ExportJsonExcel from 'js-export-excel';

const tableLoading = ref(false);
const tableData = ref([]);
const areaTypeData = ref([
	{
		id: 1,
		name: '区域类型1',
	},
	{
		id: 2,
		name: '区域类型2',
	},
]);

const date = ref([moment().subtract(1, 'months').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')]);
const radio = ref('1');
const dateType = ref('datetimerange');
watch(
	() => radio.value,
	(value) => {
		if (value == '1') {
			dateType.value = 'daterange';
		} else if (value == '2') {
			dateType.value = 'monthrange';
		} else {
			dateType.value = 'yearrange';
		}
	},
	{
		immediate: true,
	}
);
onMounted(() => {
	search();
});
const search = () => {
	tableLoading.value = true;
	let startTime = '';
	let endTime = '';
	if (date.value.length > 0) {
		if (dateType.value == 'daterange') {
			startTime = moment(date.value[0]).format('YYYY-MM-DD');
			endTime = moment(date.value[1]).format('YYYY-MM-DD');
		} else if (dateType.value == 'monthrange') {
			startTime = moment(date.value[0]).format('YYYY-MM');
			endTime = moment(date.value[1]).format('YYYY-MM');
		} else {
			startTime = moment(date.value[0]).format('YYYY');
			endTime = moment(date.value[1]).format('YYYY');
		}
		getQueryList({
			startTime: startTime,
			endTime: endTime,
		}).then((res) => {
			tableData.value = res.data;
			tableLoading.value = false;
		});
	} else {
		useMessage().warning('请选择日期');
	}
};
const exportExcel = () => {
	if (tableData.value.length === 0) return useMessage().warning('暂无数据,无法导出!');
	const excelData = [];
	tableData.value.forEach((item) => {
		excelData.push({
			时间: item.hour,
			总用电量: item.totalVal,
			主机: item.hostVal,
			水泵: item.pumpVal,
			冷却塔: item.towerVal,
		});
	});
	const options = {};
	options.fileName = '能耗查询报表'; //表格名称
	options.datas = [
		{
			sheetData: excelData, // 表格数据
			sheetName: 'sheet',
			sheetFilter: ['时间', '总用电量', '主机', '水泵', '冷却塔'], // 表头对应的sheetData的数据
			sheetHeader: ['时间', '总用电量', '主机', '水泵', '冷却塔'], //  表头名称
			columnWidths: ['6', '6', '6', '6', '6'], // 列宽
		},
	];
	const toExcel = new ExportJsonExcel(options);
	window.XLSX = XLSX;
	toExcel.saveExcel();
};
</script>
<style lang="scss" scoped>
.header {
	height: 60px;
	display: flex;
	padding: 20px;
	align-items: center;
	background-color: white;
}
.content {
	margin-top: 10px;
	overflow-y: scroll;
}
.level {
	margin-top: 10px;
	padding: 20px;
	width: 100%;
	background-color: white;
}
</style>
